import React from 'react'
//导入轮播图和flex的组件
import { Carousel, Flex, Grid, WingBlank } from 'antd-mobile';
//导入axios
import axios from 'axios'
//导入图片
import Nav1 from '../../assets/images/nav-1.png'
import Nav2 from '../../assets/images/nav-2.png'
import Nav3 from '../../assets/images/nav-3.png'
import Nav4 from '../../assets/images/nav-4.png'
//导入css样式
import './index.scss'

//导入utils里面的获取定位城市的函数
import { getCurrentCity } from '../../utils/index'

/* 
    轮播图存在的两个问题：
        1 不会自动播放
        2 从其他地方进来的时候，高度不够
    
    原因：轮播图数据是动态加载的，加载完成的时候前否轮播图的数量是不一致的

    如何解决：
        1 在state里面中添加一个旗帜来表示轮播图是否加载完成，默认为false
        2 在轮播图数据加载完成时，修改为true
        3 只有在轮播图数据加载完成的情况下，才渲染轮播图组件

    轮播图从其他地方加载进来默认是没有，会导致下面的内容一开始在最上面，然后跳转下来：
        提前给轮播图的外面设置一个div盒子，默认设置一个相同的宽度

*/
//获取地理位置的API
//获取地理位置信息
navigator.geolocation.getCurrentPosition(position => {
    console.log('当前位置信息：', position)
})

export default class index extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            //轮播图的数据
            swripers: [],
            swipersLoading: false,
            //租房小组的数据
            rentGroups: [],
            //最新资讯的数据
            news: [],
            //现在的城市
            currentCity: '上海'
        }
        this.navList = [
            { id: 1, img: Nav1, title: '整租', path: '/home/list' },
            { id: 2, img: Nav2, title: '合租', path: '/home/list' },
            { id: 3, img: Nav3, title: '地图找房', path: '/map' },
            { id: 4, img: Nav4, title: '去出租', path: '/rent/add' }
        ]

    }

    //获取请求轮播图数据
    async getSwipers() {
        const { data: res } = await axios.get('http://localhost:8080/home/swiper')
        this.setState(() => {
            return {
                swripers: res.body,
                swipersLoading: true
            }
        })
    }
    //获取租房小组的数据
    async getRentGroups() {
        const { data: res } = await axios.get('http://localhost:8080/home/groups',
            {
                params: {
                    area: "AREA|88cff55c-aaa4-e2e0"
                }
            }
        )
        console.log(res.body);
        this.setState(() => this.state.rentGroups = res.body)
    }
    //获取最新资讯的数据
    async getNews() {
        let { data: res } = await axios.get('http://localhost:8080/home/news?area=AREA%7C88cff55c-aaa4-e2e0')
        // 判断返回的状态是否是成功
        if (res.status !== 200) {
            console.error(res.description)
            return
        }
        // 把获取到的值设置给state
        this.setState({
            news: res.body
        })
    }






    //渲染轮播图
    renderSwipers() {
        return (
            this.state.swripers.map(item => (
                <a
                    key={item.id}
                    href="http://www.alipay.com"
                    style={{ display: 'inline-block', width: '100%', height: 212 }}
                >
                    <img
                        src={`http://localhost:8080${item.imgSrc}`}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top' }}
                    />
                </a>
            ))
        )
    }

    //渲染导航栏
    renderNavs() {
        return (
            this.navList.map(item => (
                <Flex.Item key={item.id} onClick={() => this.props.history.push(item.path)}>
                    <img src={item.img} alt='' />
                    <h2>{item.title}</h2>
                </Flex.Item>
            ))
        )

    }

    //渲染最新资讯
    renderNews() {
        return this.state.news.map(item => {
            return (
                <div className="news-item" key={item.id}>
                    <div className="imgwrap">
                        <img
                            className="img"
                            src={`http://localhost:8080${item.imgSrc}`}
                            alt=""
                        />
                    </div>
                    <Flex className="content" direction="column" justify="between">
                        <h3 className="title">{item.title}</h3>
                        <Flex className="info" justify="between">
                            <span>{item.from}</span>
                            <span>{item.date}</span>
                        </Flex>
                    </Flex>
                </div>
            )
        })
    }



    async componentDidMount() {
        this.getSwipers()
        this.getRentGroups()
        this.getNews()
        const nowCity = await getCurrentCity()
        console.log(nowCity);
        this.setState(() => {
            return {
                currentCity: nowCity.label
            }
        })
    }

    // componentDidUpdate(prevProps) {
    //     if (prevProps.count !== this.props.count) {
    //         //this.setState({})
    //     }
    // }

    // shouldComponentUpdate() {
    //     return true
    // }

    // componentWillUnmount() { }

    render() {
        return (
            <div className='index'>
                {/* 轮播图 */}
                <div className='swipers'>
                    <Flex className='search-box'>
                        {/* 左侧白色区域 */}
                        <Flex className="search">
                            {/* 位置 */}
                            <div className="location" >
                                <span className="name" onClick={() => this.props.history.push('/cityList')}>{this.state.currentCity}</span>
                                <i className="iconfont icon-arrow" />
                            </div>

                            {/* 搜索表单 */}
                            <div className="form" onClick={() => this.props.history.push('/search')}>
                                <i className="iconfont icon-seach" />
                                <span className="text">请输入小区或地址</span>
                            </div>
                        </Flex>
                        {/* 右侧地图图标 */}
                        <i className="iconfont icon-map" onClick={() => this.props.history.push('/map')} />
                    </Flex>
                    {this.state.swipersLoading ?
                        <Carousel
                            autoplay
                            infinite
                        >
                            {this.renderSwipers()}
                        </Carousel>
                        : ''}
                </div>
                {/* 导航栏 */}
                <Flex className='navs'>
                    {this.renderNavs()}
                </Flex>
                {/* 租房小组 */}
                <div className='rendGroups'>
                    <Flex justify='between' className='groupsTitle'>
                        <Flex.Item>
                            <h2>租房小组</h2>
                        </Flex.Item>
                        <Flex.Item>
                            <span className='more'>更多</span>
                        </Flex.Item>
                    </Flex>
                    <Grid data={this.state.rentGroups}
                        columnNum={2}
                        hasLine={false}
                        square={false}
                        renderItem={item => (
                            <Flex className='groupsItem' justify='around'>
                                <div className='desc'>
                                    <p className='itemTitle'>{item.title}</p>
                                    <span className='iteminfo'>{item.desc}</span>
                                </div>
                                <img className='image' src={`http://localhost:8080${item.imgSrc}`} alt="" />
                            </Flex>
                        )}
                    />
                </div>
                {/* 最新资讯 */}
                <div className="news">
                    <h3 className="group-title">最新资讯</h3>
                    <WingBlank size="md">{this.renderNews()}</WingBlank>
                </div>
            </div>
        )
    }
}
